<template>
  <div class="viewAddFriendDetails">
    <div class="header-top">
      <div class="head-title" @click="gotoPage()">
        <div class="backIcon"><i class="el-icon-back"></i></div>
        渠道活码详情
      </div>
    </div>
    <div class="content-big">
      <div class="content-r">
        <div class="title">天天开心</div>
        <ul class="content-ul">
          <li>
            <div class="code">活码创建人</div>
            <div class="content">主账号</div>
          </li>
          <li>
            <div class="code">创建时间：</div>
            <div class="content">2024.05.13 15:01</div>
          </li>
          <li>
            <div class="code">成员每日添加好友：</div>
            <div class="content">限制 <span>1</span> 人</div>
          </li>
        </ul>
        <ul class="content-ul">
          <li>
            <div class="code">使用人
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover">
                <div class="content-item">
                  <div class="content-li"><span class="green"></span>显示中</div>
                  <div class="content-li"><span class="glay"></span>未展示</div>
                </div>
                <svg-icon icon-class="iquestion" style="margin-left: 5px" slot="reference"></svg-icon>
              </el-popover>
              ：
            </div>
            <div class="content">

              <div class="content-item">
                <div class="content-li"><span class="green"></span>张敏</div>
                <div class="content-li"><span class="glay"></span>吴丽霞</div>
              </div>
            </div>
          </li>
          <li>
            <div class="code">自动打标签：</div>
            <div class="content">
              <div class="label-list">
                <span>未入常规群</span>
                <span>已入常规群</span>
              </div>
            </div>
          </li>

        </ul>
        <div class="group-btn">
          <el-button size="small" icon="el-icon-bottom" type="primary">下载渠道活码</el-button>
          <el-button size="small" icon="el-icon-edit">修改活码设置</el-button>
          <el-button size="small" icon="el-icon-delete">删除活码</el-button>
          <el-button size="small" icon="el-icon-s-marketing">活码修改记录</el-button>
        </div>
      </div>
      <ul class="statistics-big">
        <li>
          <span>今日新增好友</span>
          <div>70</div>
        </li>
        <li>
          <span>近7日新增好友数</span>
          <div>70</div>
        </li>
        <li>
          <span>新增好友数</span>
          <div>70</div>
        </li>
        <li>
          <span>新增好友数（去重）</span>
          <div>70</div>
        </li>
        <li>
          <span>留存好友总数</span>
          <div>70</div>
        </li>
      </ul>
    </div>
    <div class="content-big">
      <ul class="tablist">
        <li :class="active==0?`active`:``" @click="getActive(0)">按日期查看</li>
        <li :class="active==1?`active`:``" @click="getActive(1)">按成员查看</li>
      </ul>
      <el-table
        :data="tableDataList"
        ref="companylabelList"
      >
        <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
        >
          <template slot="header" v-if="item.showHeaderTip && active==0">
            <div>
              {{ item.label }}
              <el-tooltip effect="dark" :content="item.showHeaderTip" placement="top">
                <span><i class="el-icon-question"></i></span>
              </el-tooltip>
            </div>
          </template>
          <!--用于表格自定义-->
          <template slot-scope="scope">
            <div style="text-align: center">{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: 'viewAddFriendDetails',
  components: {},
  data() {
    return {
      active: 0,
      form: {},
      tableHeight: 600,
      tableColumns: [
        {key: 'group', label: `日期`, visible: true, minWidth: 100, fixed: true},
        {key: 'Token', label: `新增好友数`, visible: true, minWidth: 150, fixed: false, showHeaderTip: '当天扫码添加的新增好友数，包含流失好友',},
        {key: 'label2', label: `留存好友数`, visible: true, minWidth: 150, fixed: false, showHeaderTip: '当天扫码添加的新增好友数，包含流失好友',},
      ],
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
    }
  },
  created() {

    for (let i = 0; i < 2; i++) {
      let obj = {
        group:'2024-09-12',
        Token:0,
        label2: 0,
      }
      this.tableDataList.push(obj);
    }
  },
  mounted() {


  },
  watch: {},
  methods: {
    getActive(index) {
      this.active = index;
      console.log('active',this.active);
    },
    gotoPage() {
      this.$router.push({
        name: 'Qrcodes',
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;

    .backIcon {
      display: flex;
      align-items: center;
      padding: 0;
      margin-right: 12px;
      border: none;
      width: 24px;
      height: 24px;
      background: #4b5a95;
      border-radius: 12px;
      cursor: pointer;
      justify-content: center;
    }

    i {
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      color: #fff;
    }
  }

}

.content-big {
  margin: 10px;
  background: #fff;
  border: 1px solid #eee;

  .title {
    padding-bottom: 8px;
    font-size: 20px;
    color: rgba(0, 0, 0, .85);
  }

  .content-ul {
    display: flex;
    margin-bottom: 10px;

    li {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-right: 10px;
      margin-right: 10px;
      position: relative;
      color: rgba(0, 0, 0, .65);

      &:after {
        content: '';
        position: absolute;
        right: 0px;

      }
    }
  }
}

.content-item {
  display: flex;
  align-items: center;
  justify-content: center;

  .content-li {
    padding: 0px 5px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    margin-right: 10px;

    span {
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 5px;

      &.green {
        background: #00c270;
      }

      &.glay {
        background: #8C8C8C;
      }
    }
  }
}

.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;

  }
}

.content-r {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.statistics-big {
  display: flex;

  li {
    flex: 1;
    padding: 16px;
    list-style: none;
    border-left: 1px solid #eee;

    > span {
      position: relative;
      padding-left: 10px;

      &:after {
        content: '';
        position: absolute;
        width: 2px;
        height: 15px;
        background: #2f54eb;
        left: 0px;
        top: 2px;
      }
    }

    > div {
      font-weight: bold;
      font-size: 24px;
      margin-top: 10px;
    }
  }
}

.tablist {
  display: flex;
  align-items: center;
  margin: 20px 0px;
  margin-left: 10px;

  li {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    padding: 0px 10px;
    cursor: pointer;

    &.active {
      color: #597ef7;
      border-color: #597ef7;
    }
  }
}
</style>
